<template>
    <div class="searchPatient">
        <navBar :titleName="titleName"></navBar>
        <search @messageData="getData" style="margin-top: 42px;" placeText="输入药品名称或拼音"
                textInfo="查询"></search>
        <div class="druglist">
            <ul class="ul-list">
                <li class="li-item" v-for="(item, index) in datalist" :key="index" @click="onJump(item)">
                    <div class="thumb">
                        <img :src="item.productImageurl" alt="">
                    </div>
                    <div class="md-cell">
                        <p class="title">{{item.productName}}</p>
                        <p class="desc">{{item.packingProduct}}</p>
                        <p class="dosage">{{item.dosage}}</p>
                        <p v-if="item.productInventory > 0" class="price">￥{{ item.salePrice | price }}元</p>
                        <p v-else class="noprice">￥{{ item.salePrice | price }}元</p>
                    </div>
                    <div class="cell-3">
                        中国&nbsp;&nbsp;&nbsp;&nbsp; {{item.productInventory||0}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-console,no-empty */

    import search from "@/components/common/search.vue";
    import navBar from '@/components/common/navBar.vue'

    const components = {search, navBar}
    export default {
        components,
        data() {
            return {
                titleName: "查询药品",
                keyword: "",
                datalist: [],
                index: -1,
                medicineList: []
            }
        },
        filters:{
          price(salePrice) {
                let price = salePrice * 14;
                price -= price % 10;
                return new Number(price / 1000).toFixed(2)
          }
        },
        created() {
            // this.$store.state.medicineList
            if (!this.$route.params) {
                return;
            }
            let item = this.$route.params.item;
            if (item) {
                this.index = this.$route.params.index;
                this.medicineList = item;
            }
        },
        methods: {
            getData(val) {
                //TODO:后续获取搜索框的传递回来的值
                console.log("receive children's value : " + val);
                this.API.GET(this.ApiUrl.GET_DRUG, {
                    params: {search: val}
                }).then(({data}) => {
                    if (data.code === 1200 && data.data.length > 0) {
                        this.datalist = data.data.sort(function(a){return a.productInventory > 0;});
                    } else {
                        this.datalist = [];
                        this.$toast.text("查询不到药品" + val + "，请重试！");
                    }
                })
            },
            // 选择跳转
            onJump(drug) {
                if (drug.productInventory < 1) {
                    this.$toast.text("药品库存不足，请选择其他药品替换！");
                    return false;
                }
                console.log("--------onJump--------");
                this.$store.state.medicineList = null;
                console.log(this);
                console.log(this.medicineList);
                console.log(this.medicineList[this.index]);
                console.log(drug);

                let price = drug.salePrice * 14;
                price -= price % 10;
                let item = {
                    num: 1,
                    packingProduct: drug.packingProduct,
                    // dosage: drug.dosage,
                    // administration: {"code":150,"name":"口服","key":"KF"},
                    administration: "口服",
                    frequency: "一天3次，餐后",
                    dose: "",
                    times: "3",
                    total: "",

                    productCode: drug.productCode,
                    productImageurl: drug.thumbnailUrl,
                    productName: drug.productName,
                    productPrice: price / 10,
                    skuId: drug.id
                };
                this.medicineList[this.index].skus.push(item);
                console.log(this.medicineList);
                this.$store.state.medicineList = this.medicineList;
                this.$router.back();
                console.log("--------onJump--------");
            },
        }
    }
</script>

<style lang="css" scoped>

    .drug {
        min-height: 40px;
        border-bottom: 1px solid #ccc;
        background-color: white;
    }

    .druglist {
        background-color: #e6e6e6;
    }

    .headerplace {
        height: 56px;
    }

    .header {
        height: 56px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
    }

    .ul-list {
        margin: 0;
        padding: 0 12px;
        background-color: #fff;
    }

    .ul-list .li-item {
        font-size: 14px;
        display: flex;
        padding: 16px 0;
        border-bottom: 1px solid #ededed;
    }

    .ul-list .li-item .thumb {
        min-width: 100px;
        height: 80px;
        overflow: hidden;
        border: solid 1px #efefef;
        width: 35%;
    }

    .ul-list .li-item .thumb img {
        width: 100%;
    }

    .ul-list .li-item .md-cell {
        padding: 0 10px;
        flex-grow: 1;
        width: 50%;
    }

    .ul-list .li-item .title {
        font-size: 14px;
        color: #1D2030;
    }

    .ul-list .li-item .desc {
        color: #7E8A96;
        font-size: 12px;
    }

    .ul-list .li-item .dosage {
        color: #7E8A96;
        font-size: 12px;
        width: 100%;
    }

    .ul-list .li-item .cell-3 {
        display: flex;
        align-items: center;
        color: #666;
        white-space: nowrap;
        width: 15%;
    }

    .ul-list .li-item p {
        margin: 8px 0;
        padding: 0;
    }

    .ul-list .li-item .price {
        color: #D73A2C;
        font-size: 20px;
    }

    .ul-list .li-item .noprice {
        color: #dedede;
        font-size: 20px;
    }

</style>